<!-- components/AlphaIndexList.vue -->
<template>
  <view class="container">
    <view class="search-bar">
      <view class="search-bar-input" @click="handleSearch">
        <view
          class="search-input"
        >
        <image
          src="/static/search.png"
          mode="widthFix"
          style="width: 40rpx; height: 40rpx;margin-right: 12rpx;margin-left: 10rpx;"
        />
        搜索产品信息</view>
        <view class="search-btn" >搜索</view>
      </view>
      <view class="search-tab">
          <!-- <scroll-view
            scroll-x
            class="tab-scroll"
            style="width: 100vw;"
          >
            <view
              class="tab-item"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ active: currentTab === index }"
              @click="setTabs(index)"
            >
              {{ item.serieName }}
            </view>
          </scroll-view> -->
      </view>
    </view>
    
    <view class="container-list">
        <!-- 左侧品牌 -->
        <scroll-view scroll-y class="brand-list">
            <view
                v-for="(brand, index) in brands"
                :key="index"
                class="brand-item"
                :class="{ active: brand === selectedBrand }"
                @click="selectBrand(brand,index)"
            >
            <view class="line" v-if="brand === selectedBrand"></view>
                {{ brand.brandName }}
            </view>
        </scroll-view>

        <!-- 中间分组数据 -->
        <view class="product-list">
          <scroll-view
            v-if="selectedBrand.id"
            scroll-x
            show-scrollbar="false"
            class="tab-scroll no-scrollbar"
            :style="{ width: 'calc(100vw - 286rpx)' }"
          >
            <view
              class="tab-item"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ active: currentTab === index }"
              @click="setTabs(index)"
            >
              {{ item.serieName }}
            </view>
          </scroll-view>
          <scroll-view
            scroll-y
            class="product-list"
            :scroll-into-view="scrollInto"
            scroll-with-animation
            style="padding-left: 0px;"
          >
          <view
              v-for="group in groupedProducts"
              :key="group.letter"
              :id="'section-' + group.letter"
          >
              <view class="section-title">{{ group.letter }}</view>
              <view
              v-for="(item, i) in group.items"
              :key="i"
              class="product-item"
              @click="$emit('itemClick', selectedBrand, item)"
              >
              {{ item }}
              </view>
          </view>
          <view class="product-empty">
            <view v-if="groupedProducts.length == 0 && selectedBrand.id" class="product-empty-title">暂时没有其它型号</view>
            <view v-if="selectedBrand.id == ''" class="product-empty-title">暂时没有其它品牌</view>
            <view v-if="selectedBrand.id == ''" class="product-empty-desc">找不到想估的型号？ </view>
            <view v-if="selectedBrand.id == ''" class="product-empty-btn" @click="goAdd">去申请添加 ></view>
            <view v-if="selectedBrand.id" class="product-empty-desc" >找不到想估的型号? <span class="blues" @click="goAdd">申请添加 ></span></view>
          </view>
          </scroll-view>
        </view>

        <!-- 右侧索引 -->
        <view class="index-bar" v-if="groupedProducts.length && selectedBrand.id">
        <view
            v-for="letter in alphabet"
            :key="letter"
            class="index-letter"
            @click="jumpTo(letter)"
        >
            {{ letter }}
        </view>
        </view>
    </view>
    
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  brands: Array,
  groupedProducts: Array, // 当前选中品牌对应的分组数据
  tabList: Array,
})

const emits = defineEmits(['brandChange', 'itemClick', 'tabChange'])
const selectedBrand = ref('')
const scrollInto = ref('')
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('')
const currentTab = ref(0)
watch(
  () => props.brands,
  (newBrands) => {
    if (newBrands && newBrands.length > 0 && !selectedBrand.value) {
      selectedBrand.value = newBrands[0]
      emits('brandChange', newBrands[0], 0) // 初始化默认触发一次 brandChange
    }
  },
  { immediate: true, deep: false }
)
const selectBrand = (brand, index) => {
  selectedBrand.value = brand
  currentTab.value = 0 // 重置标签页为第一个
  emits('brandChange', brand, index)
}
const setTabs = (index) => {
  currentTab.value = index
  console.log('当前选中标签:', index)
  emits('tabChange', index)
}
const jumpTo = (letter) => {
  scrollInto.value = 'section-' + letter
}
const handleSearch = () => {
  console.log('搜索关键词:')
  // 发起搜索请求或跳转
  uni.navigateTo({ url: '/pages/index/search' })
}
const goAdd = () => {
  uni.navigateTo({ url: '/pages/index/addProject' })
}
</script>

<style scoped>
.container {
  
  height: 100vh;
}
.search-bar{
    /* border: 1px solid #ccc; */
    padding: 6px;
    border-radius: 4px;
    height: 90rpx;
    width: 100%;
    position: sticky;
    top: -1rpx;
    padding: 10rpx 0;
    z-index: 99;
    background-color: #fff;
}
.search-bar-input{
    flex: 1;
    display: flex;
    align-items: center;
    margin-top: 10rpx;
}
.search-tab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    margin-top: 10rpx;
}
.search-tab-title{
  border-left: 10rpx solid #007aff;
  padding-left: 20rpx;
  font-size: 28rpx;
  width: 200rpx;
}
.tab-scroll {
  white-space: nowrap;
  padding: 10rpx 0;
  margin-bottom: 20rpx;
  background: #fff;
}

.tab-item {
  display: inline-block;
  padding: 16rpx 24rpx;
  margin-right: 16rpx;
  font-size: 24rpx;
  border-radius: 16rpx;
  background: #F7F8F9;
}

.tab-item.active {
  background-color: #0267FF;
  color: #fff;
}
.search-input{
    flex: 1;
    padding: 6px 8px;
    border: none;
    outline: none;
    font-size: 28rpx;
    margin-left: 20rpx;
    height: 40rpx;
    line-height: 40rpx;
    border: 4rpx solid #000;
    color: rgba(0, 0, 0, 0.3);
    border-radius: 40rpx;
    padding-left: 20rpx;
    display: flex;
}
.search-btn{
  padding: 6px 12px;
  color: #0267FF;
  margin-right: 8rpx;
  font-size: 32rpx;
  cursor: pointer;
}
.container-list{
    display: flex;
    height: calc(100% - 100rpx); /* 必须固定高度，才能让内部 scroll-view 滚动 */
    overflow: hidden;
}

.brand-list {
  width: 216rpx;
  background-color: #F7F8F9;
  height: 100%;
  display: inline-table;
}

.brand-item {
  display: flex;
  align-items: center;
  padding: 36rpx 20rpx;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
}

.brand-item.active {
  background-color: #fff;
  font-weight: bold;
  padding-left: 10rpx;
}
.line{
  width: 7rpx;
  height: 24rpx;
  background: #0064ED;
  display: inline-block;
  margin-right: 22rpx;
}

.product-list {
  flex: 1;
  padding: 0rpx 0rpx 0rpx 32rpx;
  background-color: #fff;
  height: 94%;
}

.section-title {
  font-weight: bold;
  font-size: 30rpx;
  color: rgba(0, 0, 0, 0.3);
  padding: 20rpx 0;
}

.product-item {
  padding: 30rpx 0 ;
  font-size: 34rpx;
  color: rgba(0, 0, 0, 0.8);
}

.index-bar {
  position: fixed;
  right: 30rpx;
  top: 270rpx;
  z-index: 10;
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
}

.index-letter {
  font-size: 20rpx;
  padding: 6rpx;
  color: rgba(0, 0, 0, 0.3);
  text-align: center;
}
.product-empty{
  margin-top: 10rpx;
}
.product-empty-title{
 color: #333;
 font-size: 34rpx;
}
.product-empty-desc{
  font-size: 24rpx;
  color: #ccc;
  padding: 10rpx 0;
}
.product-empty-btn{
  padding: 23rpx 0rpx;
  width: 470rpx;
  margin-top: 24rpx;
  text-align: center;
  border-radius: 40rpx;
  color: #000000;
  font-size: 34rpx;
  background: #F7F8F9;
  border-radius: 652rpx;
  box-sizing: border-box;
  border: 1px solid #E8ECF4;
}
.blues{
  color: #0267FF;
  cursor: pointer;
}
</style>
<style>
.no-scrollbar{
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}
::v-deep ::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}
</style>